<template>
  <div>
    <!-- 导航 -->
    <el-menu 
      class="el-menu-demo"
      mode="horizontal"
      background-color="#1e90ff"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1" @click="zhuye">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">消息</template>
        <el-menu-item index="2-1">最新消息</el-menu-item>
        <el-menu-item index="2-2">过往消息</el-menu-item>
      </el-submenu>
      <el-submenu index="3" class="ger">
        <template slot="title">个人资料</template>
        <el-menu-item index="2-1" @click="bjziliao">编辑资料</el-menu-item>
        <el-menu-item index="2-2">个人中心</el-menu-item>
      </el-submenu>
    </el-menu>
    <!-- 头像 -->
    <div class="tou">
      <el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <div class="sc">上传头像</div>
    <!-- 个人资料 -->
    <p class="title">个人中心</p>
    <div class="gr">
    <div class="zl-zh">
      <div class="ss">账号:</div>
      <div class="tt">
        <p>{{zhanghao}}</p>
      </div>
    </div>
    <div class="zl-zh">
      <div class="ss">公司名称:</div>
      <div class="tt">
        <p>{{company}}</p>
      </div>
    </div>
    <div class="zl-zh">
      <div class="ss">地址:</div>
      <div class="tt">
        <p>{{address}}</p>
      </div>
    </div>
    <div class="zl-zh">
      <div class="ss">职位:</div>
      <div class="tt">
        <p>{{position}}</p>
      </div>
    </div>
    <div class="zl-zh">
      <div class="ss">电话:</div>
      <div class="tt">
        <p>{{tel}}</p>
      </div>
    </div>
    <div class="zl-zh">
      <div class="ss">姓名:</div>
      <div class="tt">
        <p>{{name}}</p>
      </div>
    </div>
    </div>
    <!-- 发布职位 -->
    <div class="fabu">
    <el-form
      :model="ruleForm"
      status-icon
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="职位" prop="job" class="aa">
        <el-input type="text" v-model="ruleForm.job" class="inp"></el-input>
      </el-form-item>
      <el-form-item label="薪资" prop="pay" class="aa">
        <el-input type="text" v-model="ruleForm.pay" class="inp"></el-input>
      </el-form-item>
      <el-form-item label="工作需求" prop="xuqiu" class="aa">
        <el-input type="textarea" v-model.number="ruleForm.xuqiu" class="inp"></el-input>
      </el-form-item>
      <el-form-item label="学历" prop="xueli" class="aa">
        <el-input type="text" v-model.number="ruleForm.xueli" class="inp"></el-input>
      </el-form-item>
      <el-form-item label="经验" prop="jingyan" class="aa">
        <el-input type="text" v-model.number="ruleForm.jingyan" class="inp"></el-input>
      </el-form-item>
      <el-form-item label="公司" prop="gongsi" class="aa">
        <el-input type="text" v-model.number="ruleForm.gongsi" class="inp"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="tijiao" style=" margin-left: 10px;">立即发布</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
       ruleForm: {
        job: "",
        pay: "",
        xuqiu: "",
        xueli: "",
        jingyan: "",
        gongsi: ""
      },
      zhanghao: "",
      company: "",
      address: "",
      position: "",
      tel: "",
      name: "",
      imageUrl: "",
     
    };
  },
  methods: {
    bjziliao() {
      this.$router.push({
        path: "/bjziliao"
      });
    },
    zhuye() {
      this.$router.push({
        path: "/zhuye"
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    tijiao() {
      this.axios.post("/hr/jobs", {
          job: this.ruleForm.job,
           pay: this.ruleForm. pay,
          xuqiu: this.ruleForm.xuqiu,
         xueli: this.ruleForm.xueli,
        jingyan: this.ruleForm.jingyan,
          gongsi: this.ruleForm.gongsi
        }) .then(res => {
          console.log(res);
          alert(res.data.msg);
          
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    var zh = localStorage.getItem("111");
    // console.log(name)
    this.axios({
      method: "post",
      url: "/hr/qyzx",
      params: {
        zhanghao: zh
      }
    }).then(res => {
      console.log(res);
      // this.a=res;
      this.zhanghao = res.data[0].zhanghao;
      this.company = res.data[0].company;
      this.address = res.data[0].address;
      this.position = res.data[0].position;
      this.tel = res.data[0].tel;
      this.name = res.data[0].name;
    });
  }
};
</script>
<style  scoped>
.gr{
  width: 470px;
  height: 430px;
 
  margin-left: 114px;
  float: left;
}
.title {
  font-size: 23px;
  line-height: 50px;
  font-weight: bold;
  margin: 10px;
  text-align: center;
}
.zl-zh {
  width: 72%;
  height: 50px;
  margin: 0 auto;
 
  margin-top: 19px;
}
.ss {
  width: 85px;
  height: 48px;
  float: left;
  line-height: 48px;
  text-align: right;
}
.tt {
  width: 240px;
  height: 48px;
  float: left;
  border: 1px solid blue;
}
.ger {
  float: right;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 156px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.tou {
  width: 148px;
  height: 155px;
  float: left;
  border: 1px solid green;
  margin-left: 30px;
  margin-top: 60px;
}
.sc {
  width: 80px;
  height: 30px;
  float: left;

  margin-top: 258px;
  margin-left: -130px;
}
.aa {
  margin-left: 11%;
}
.inp {
  float: left;
  width: 99%;
}
.fabu{
  width: 458px;
  height: 430px;
  float: left;


}
</style>

